<template>
  <div style="width: 100%;height: 100%;">
    <div id="main3" style="width: 100%;height: 100%;"></div>
  </div>
</template>
<script>
const echarts = require('echarts')
export default {
  name: '',
  components: {
  },
  data () {
    return {
    }
  },
  created () {
  },
  mounted () {
    this.drawChart()
  },
  methods: {
    drawChart () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('main3'))
      var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']
      var option = {
        title: {
          text: '档案门类统计',
          x: 'center'
          // y: 'center',
          // textStyle: {
          //   fontSize: 20
          // }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [{
          type: 'pie',
          center: ['50%', '50%'],
          radius: ['24%', '45%'],
          clockwise: true,
          avoidLabelOverlap: true,
          hoverOffset: 15,
          itemStyle: {
            normal: {
              color: function (params) {
                return colorList[params.dataIndex]
              }
            }
          },
          label: {
            show: true,
            position: 'outside',
            formatter: '{a|{b}：{d}%}\n{hr|}',
            rich: {
              hr: {
                backgroundColor: 't',
                borderRadius: 3,
                width: 3,
                height: 3,
                padding: [3, 3, 0, -12]
              },
              a: {
                padding: [-30, 15, -20, 15]
              }
            }
          },
          labelLine: {
            normal: {
              length: 20,
              length2: 30,
              lineStyle: {
                width: 1
              }
            }
          },
          data: [{
            name: '北京',
            value: 5600
          }, {
            name: '上海',
            value: 3600
          }, {
            name: '广州',
            value: 1500
          }, {
            name: '深圳',
            value: 2000
          }, {
            name: '未知',
            value: 899
          }, {
            name: '海外',
            value: 4000
          }]
        }]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      // 根据窗口的大小变动图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>
<style lang="less" scoped>

</style>
